<template>
    <div class="hello">
        <el-button type="success" size="mini" icon="el-icon-circle-plus" @click="hanldeAdd()">添加</el-button>
        <el-table
            :data="tableData"
            style="width: 100%"
            >
            <el-table-column
            prop="id"
            label="id"
            width="70"
           >
            </el-table-column>
            <el-table-column
            prop="roleName"
            label="角色名称"
            >
            </el-table-column>
            <el-table-column
            prop="cTime"
            label="创建时间"
            >
            </el-table-column>

            <el-table-column
            prop="mTime"
            label="更新时间"
            >
            </el-table-column>
           
            <el-table-column
            label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-edit"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        icon="el-icon-delete"
                        type="danger"
                        @click="handlerDelet(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        background
        layout="total,prev, pager, next,jumper,sizes"
        @current-change="handleSizeChange"
        @size-change="handleCurrentChange"
        :current-page="page"
        :page-size="rows"
        :page-sizes="[5,10,20,50,100,200,500]"
        :total="total">
        </el-pagination>

        <!--  表单对话框  -->
        <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="角色名称">
                <el-input v-model="form.roleName"></el-input>
            </el-form-item>

            <el-table
            :data="menuData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'child'}">
                    <el-table-column
                    prop="menuName"
                    label="菜单名称"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    width="70"
                    align="center"
                    label="图标">
                        <template slot-scope="scope">
                            <i :class="scope.row.icon"></i>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="checked"
                    label="操作">
                        <template slot-scope="scope">
                            <el-checkbox  v-model="scope.row.checked" @change="handleCheckedChange(scope.row)"></el-checkbox>
                        </template>
                    </el-table-column>

        </el-table>


        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false;handleOk()">确 定</el-button>
        </span>
        </el-dialog>

    </div>
  </template>
  
  <script>
  export default {
    name: 'Role',
    created(){
        this.loadAllMenu();
        this.loadRole();
    },
    data(){
        return{
            dialogVisible:false,
            title:'添加角色',
            tableData:[],
            page:1,
            rows:10,
            total:0,
            menuData:[],
            form:{
                roleName:'',
                id:0,
                checkBox:{},
            },
        };
    },
    methods:{

        //加载平台所有的菜单
        loadAllMenu(){
            this.api.loadAllMenu().then((res)=>{
                if(res.code==0){
                    this.menuData=res.data;
                    //处理菜单数据
                    for(var i=0;i<this.menuData.length;i++){
                        var pmenu=this.menuData[i];
                        pmenu.checked=false;
                        if(pmenu.child!=undefined && pmenu.child.length>0){
                            for(var j =0;j< pmenu.child.length;j++){
                                var child=pmenu.child[j];
                                child.checked=false;
                            }
                        }
                    }
                    
                    console.log("-----------------------------------")
                    console.log(this.menuData)
                }
            });

        },
        loadRole(){
            var param="page="+this.page+"&rows="+this.rows;
            this.api.loadRole(param).then((res)=>{
                if(res.code==0){
                    this.tableData=res.data;
                    this.total=res.total;
                }
            });
        },
        handleCheckedChange(row){
           this.changeItem(row.id,row.checked);
           if(row.checked){
                this.changeItem(row.parentId,row.checked);
           }
        },
        changeItem(id,value){
            //处理菜单数据
            var temp=this.menuData;
            for(var i=0;i<temp.length;i++){
                var pmenu=temp[i];
                if(pmenu.id==id){
                    pmenu.checked=value;
                    break;
                }
                if(pmenu.child!=undefined && pmenu.child.length>0){
                    for(var j =0;j< pmenu.child.length;j++){
                        var child=pmenu.child[j];
                        if(child.id==id){
                            child.checked=value;
                            break;
                        }
                    }
                }
            }
            this.menuData=JSON.parse(JSON.stringify(temp));
        },
        handleOk(){
            var param="";
            if(this.form.id>0){
                param+="id="+this.form.id+"&";
            }
            param+="roleName="+this.form.roleName+"&";
            var id="";
            var temp=this.menuData;
            for(var i=0;i<temp.length;i++){
                var pmenu=temp[i];
                if(pmenu.checked){
                    id+=pmenu.id+",";
                }
                if(pmenu.child!=undefined && pmenu.child.length>0){
                    for(var j =0;j< pmenu.child.length;j++){
                        var child=pmenu.child[j];
                        if(child.checked){
                            id+=child.id+",";
                        }
                    }
                }
            }
            param+="menuIds="+id+"&";

            this.api.updateRole(param).then(res=>{
                console.log(res);
                this.loadRole();
            });
        },
        hanldeAdd(){
            this.title="添加角色";
            this.form.id=0;
            this.dialogVisible=true;
        },
        handleEdit(index,row){
            this.form.id=row.id;
            this.form.roleName=row.roleName;
            this.title="编辑角色";
            this.dialogVisible=true;
            //循环遍历菜单
            var map={};
            for(var i=0;i<row.rightList.length;i++){
                var menuId=row.rightList[i].menuId;
                map['menuId_'+menuId]=menuId;
            }
            

            var temp=this.menuData;
            for(var i=0;i<temp.length;i++){
                var pmenu=temp[i];
                if(map['menuId_'+pmenu.id]==undefined){
                    pmenu.checked=false;
                }else{
                    pmenu.checked=true;
                }
                if(pmenu.child!=undefined && pmenu.child.length>0){
                    for(var j =0;j< pmenu.child.length;j++){
                        var child=pmenu.child[j];
                        if(map['menuId_'+child.id]==undefined){
                            child.checked=false;
                        }else{
                            child.checked=true;
                        }
                    }
                }
            }
            this.menuData=JSON.parse(JSON.stringify(temp));

        },
        handleSizeChange(val){
            this.page=val;
            this.loadRole();
        },
        handleCurrentChange(val){
            this.rows=val;
            this.loadRole();
        },


        handlerDelet(id){
            this.$confirm("确定删除该角色吗？","提示",{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
            }).then(()=>{
                this.api.deleteRole(id).then((res)=>{
                    if(res.code==0){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.message
                        });
                    }
                    this.loadRole();
                });
            }).catch(()=>{
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });

        },

    },
  }
  </script>
  <style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  </style>
  